<template>
	<view class="two_x">
		<scroll-view :scroll-into-view="'ss'+current" scroll-x="true" style="background-color: #fff	;padding-top: 20px;">
			<view class="tabs">
				<text :id="'ss'+index" @click="chooseTab(index)" :class="current==index ? 'cur' : ''" v-for="(item,index) in tabs" :key="index">{{item.name}}</text>
			</view>
		</scroll-view>
		
		
		
		<view class="tabs_main">
			<view class="" v-if="current==0">
				0
			</view>
			<view class="" v-if="current==1">
				1
			</view>
			<view class="" v-if="current==2">
				12
			</view>
			<view class="" v-if="current==3">
				3
			</view>
			<view class="" v-if="current==4">
				4
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				tabs:[{name:'百姓商城',id:'1'},{name:'百姓商城',id:'2'},{name:'百姓商城',id:'3'},{name:'百姓商城',id:'4'},{name:'百姓商城',id:'5'}],
			    current:0
			}
		},
		methods: {
			chooseTab(index){
				console.log(index)
				this.current=index
			}
		}
	}
</script>

<style lang="scss">
  .tabs{
	  display: flex;
	  }
		.tabs text{
		  padding: 10px;
			text-align: center;
		  white-space: nowrap;
		  color: #000;
		}
		.cur{
		  color:#f00;
		  border-bottom:1px solid #f00;
		  font-weight: bold;
	  }
</style>

